Traté de crear una variable y un bucle for dentro de un componente funcional para mostrar las estrellas de calificación en un producto, pero cuando intento compilarlo, me sigue dando el mismo error:
SyntaxError: Rating.js: Unexpected token, expected ")" for(let i=0; i<4; i++) { if({value}>i && {value}<i+1) { ^ stars.push( <i key={i}No sé si no se puede poner un bucle for dentro de un componente funcional, si hay algo extra que no sé que no debería estar haciendo o si realmente tengo un error de sintaxis.
El código completo del componente:
import React from 'react' const Rating = ({value, text, color}) => { let stars = []; for(let i=0; i<4; i++) { if({value}>i && {value}<i+1) { //<-- stars.push( <i key={i} style={{color}} className={ 'fas fa-star-half-alt' } /> )} else if({value}>i) { stars.push( <i key={i} style={{color}} className={ 'fas fa-star' } /> )} else { stars.push( <i key={i} style={{color}} className={ 'far fa-star' } /> ) } } return ( <div className='rating'> <span> {stars} </span> </div> ) } export default RatingLa causa principal de que esté utilizando la interpolación de manera incorrecta. No necesita usar {} fuera de su plantilla JSX, es por eso que JS culpa a {value} su declaración if es código JS, necesita usar {} cuando quiera incrustar algún valor JS en su plantilla JSX, por ejemplo, <span>{value}</span>
import React from 'react' const Rating = ({value, text, color}) => { let stars = []; for(let i=0; i<4; i++) { if(value > i && value < i+1) { stars.push( <i key={i} style={{color}} className={ 'fas fa-star-half-alt' } /> )} else if( value > i) { stars.push( <i key={i} style={{color}} className={ 'fas fa-star' } /> )} else { stars.push( <i key={i} style={{color}} className={ 'far fa-star' } /> ) } } return ( <div className='rating'> <span> {stars} </span> </div> ) } export default Rating